<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="../fonts/bitbug_favicon.ico" />


    <!-- 引入动画 normalize.css 样式 -->
    <link rel="stylesheet" href="./css/normalize.css">
    <!-- 引入动画 camroll_slider.css 样式 -->
    <link rel="stylesheet" href="./css/camroll_slider.css">
    <!-- 引入swiper css样式 -->
    <link rel="stylesheet" href="./css/swiper.min.css">
    <!-- 引入swiper js样式 -->
    <script src="./js/swiper.min.js"></script>
    <!-- 引入JQuery 样式 -->
    <script src="./js/jQuery.min.js"></script>
    <!-- 引入公共样式 -->
    <link rel="stylesheet" href="./css/common1.css">
    <!-- 引入js -->
    <script src="./js/common1.js"></script>
    <!-- 引入css样式 -->
    <link rel="stylesheet" href="./css/business.css">
    <!-- 引入自己的js样式 -->
    <script src="./js/business.js"></script>
    <title>业务-Tencent 腾讯</title>
    <style>
        #my-slider {
            width: 1519px;
            height: 404px;
            color: #ffffff;
        }
        
        @media (max-width: 640px) {
            #my-slider .crs-bar-roll-current {
                width: 38px;
                height: 38px;
            }
            #my-slider .crs-bar-roll-item {
                width: 30px;
                height: 30px;
            }
        }
    </style>
</head>

<body>
    <!-- 公共样式----头部导航栏制作开始 -->
    <div class="common-first">
        <div class="w common-nav">
            <!-- 头部logo制作 -->
            <div class="common-nav-logo">
                <a href="../index.html" class="common-logo">
                    <h1>Tencent腾讯</h1>
                </a>
            </div>
            <!-- 头部中间导航栏制作 -->
            <ul class="common-menu">
                <li class="menu-items">
                    <a href="./abstract.html" class="text">简介</a>
                    <ul class="menu-list">
                        <li><a href="./abstract.html#one">公司简介</a></li>
                        <li><a href="./abstract.html#seven">愿景及使命</a></li>
                        <li><a href="./abstract.html#two">发展历程</a></li>
                        <li><a href="./abstract.html#three">业务架构</a></li>
                        <li><a href="./abstract.html#four">管理团队</a></li>
                        <li><a href="./abstract.html#five">企业文化</a></li>
                        <li><a href="./abstract.html#six">办公地点</a></li>
                    </ul>
                </li>
                <li class="menu-items">
                    <a href="./business.html" class="text">业务</a>
                    <ul class="menu-list">
                        <li><a href="./business.html#eight">面向用户</a></li>
                        <li><a href="./business.html#eight">面向企业</a></li>
                        <li><a href="./business.html#eight">创新科技</a></li>
                    </ul>
                </li>
                <li class="menu-items">
                    <a href="./staff.html" class="text">员工</a>
                    <ul class="menu-list">
                        <li><a href="./staff.html#nine">人才发展</a></li>
                        <li><a href="./staff.html#show_pic2">腾讯学院</a></li>
                        <li><a href="./staff.html#staff_work_environment">工作环境</a></li>
                        <li><a href="./staff.html#staff-con-4">员工活动</a></li>
                    </ul>
                </li>
                <li class="menu-items">
                    <a href="./duty.html" class="text">企业责任</a>
                    <ul class="menu-list">
                        <li><a href="./duty.html#ten">全球战疫</a></li>
                        <li><a href="./duty.html#eleven">践行承诺</a></li>
                        <li><a href="./duty.html#tweleve">支持善举</a></li>
                        <li><a href="./duty.html#lyh">鼓励创新</a></li>
                        <li><a href="./duty.html#lyh1">企业社会责任报告</a></li>
                    </ul>
                </li>
                <li class="menu-items">
                    <a href="./index-investor.html" class="text">投资者</a>
                    <ul class="menu-list">
                        <li><a href="./index-investor.html#lyh10">财务新闻</a></li>
                        <li><a href="./index-investor.html#lyh11">公告及财务报告</a></li>
                        <li><a href="./index-investor.html#lyh12">业绩电话会及路演</a></li>
                        <li><a href="./index-investor.html#lyh13">投资者工具包</a></li>
                        <li><a href="./index-investor.html#lyh14">证券及债券信息</a></li>
                        <li><a href="./index-investor.html#lyh15">企业管治</a></li>
                    </ul>
                </li>
                <li class="menu-items">
                    <a href="./index-media.htm" class="text">媒体</a>
                    <ul class="menu-list">
                        <li><a href="./index-media.htm#lyh20">企业动态</a></li>
                        <li><a href="./index-media.htm#lyh21">财务新闻</a></li>
                        <li><a href="./index-media.htm#lyh22">腾讯视角</a></li>
                        <li><a href="./index-media.htm#lyh23">媒体资料库</a></li>
                    </ul>
                </li>
            </ul>
            <!-- 头部右边字体栏目制作 -->
            <div class="common-chosefont">
                <a class="lang_ch current" lang="zh-cn">简</a>
                <i class="s_line">|</i>
                <a class="lang_hk" lang="zh-hk">繁</a>
                <i class="s_line">|</i>
                <a class="lang_en" lang="en-us">EN</a>
            </div>
        </div>
    </div>
    <!-- 公共样式----头部导航栏制作结束 -->


    <!-- 页面主题照片 -->
    <div class="business-top clearfix">
        <h2>连接生态</h2>
        <p>从连接人、服务及设备，到连接企业及未来科技，形成共赢的产业生态</p>
    </div>
    <div class="form" style="width: 1500px;margin: 0 auto;">
        <!-- Tab栏 -->
    <div class="business-tab clearfix" id="eight">
        <ul style="left: 16px;right: auto">
            <li class="curret"><a href="javascript:;">面向用户</a></li>
            <li><a href="javascript:;">页面企业</a></li>
            <li><a href="javascript:;">创新科技</a></li>
        </ul>
    </div>
    <!-- Tab栏主题部分  -->
    <div class="ctv">
        <!-- 面向用户模块 -->
        <div class="business clearfix" style="display: block;">
            <!-- 主题内容部分 通信与社交 -->
            <div class="business-nav clearfix">
                <div class="nav-con">
                    <div class="nav-text clearfix">
                        <h3>通信与社交</h3>
                        <p>腾讯从连接人与人出发，开发和提供功能丰富、易于使用的即时通信和社交平台，以创新的方式让沟通、分享和交流变得更便捷、生动和个性化，丰富人们的生活。</p>
                    </div>
                    <div class="product-box">
                        <div class="box">
                            <div class="log"><img src="./images/wx.png" alt=""></div>
                            <div class="mess">
                                <p class="name">微信</p>
                                <p class="desc">微信，是一个生活方式</p>
                            </div>
                        </div>
                        <div class="box">
                            <div class="log"><img src="./images/qq.png" alt=""></div>
                            <div class="mess">
                                <p class="name">QQ</p>
                                <p class="desc">每一天，乐在沟通</p>
                            </div>
                        </div>
                        <div class="box">
                            <div class="log"><img src="./images/kj.png" alt=""></div>
                            <div class="mess">
                                <p class="name">QQ空间</p>
                                <p class="desc">分享生活，留住感动</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 主题内容部分 数字内容 -->
            <div class="business-sz clearfix">
                <div class="sz-text">
                    <h3>数字内容</h3>
                    <p>腾讯不断探索更适合未来趋势的多元化社交娱乐融合<br>体。基于优质内容，以技术为驱动引擎，我们不断探索<br>社交和内容融合的下一代形态。透过跨屏幕、多平台、<br>多形态的模式，为互联网用户提供多元化、多维度的内<br>容，以满足用户的不同娱乐体验。
                        <br> 同时，腾讯深明版权及IP对创意产业发展的重要性。在
                        <br>尊重版权的基础上，我们不断在内容业务生态体系内发<br>掘有潜质的IP，助力其成长。目前，我们的数字内容产<br>品主要包括: 游戏、视频、直播、新闻、音乐、文学。
                    </p>
                </div>
                <div class="sz-box box111">
                    <div class="box">
                        <div class="log"><img src="./images/TXYX.png" alt=""></div>
                        <div class="mess">
                            <p class="name">腾讯游戏</p>
                            <p class="decs">去发现，无限可能</p>
                        </div>
                    </div>
                    <div class="box">
                        <div class="log"><img src="./images/TXSP.png" alt=""></div>
                        <div class="mess">
                            <p class="name">腾讯视频</p>
                            <p class="decs">去发现，无限可能</p>
                        </div>
                    </div>
                    <div class="box">
                        <div class="log"><img src="./images/TXYY.png" alt=""></div>
                        <div class="mess">
                            <p class="name">腾讯影业</p>
                            <p class="decs"></p>
                        </div>
                    </div>
                    <div class="box">
                        <div class="log"><img src="./images/WS.png" alt=""></div>
                        <div class="mess">
                            <p class="name">微视</p>
                            <p class="decs">发现更有趣</p>
                        </div>
                    </div>
                    <div class="box">
                        <div class="log"><img src="./images/TXXW.png" alt=""></div>
                        <div class="mess">
                            <p class="name">腾讯新闻</p>
                            <p class="decs">打开眼界</p>
                        </div>
                    </div>
                    <div class="box">
                        <div class="log"><img src="./images/TXTY.png" alt=""></div>
                        <div class="mess">
                            <p class="name">腾讯体育</p>
                            <p class="decs"></p>
                        </div>
                    </div>
                    <div class="box">
                        <div class="log"><img src="./images/TXDM.png" alt=""></div>
                        <div class="mess">
                            <p class="name">腾讯动漫</p>
                            <p class="decs"></p>
                        </div>
                    </div>
                    <div class="box">
                        <div class="log"><img src="./images/TXYYYL.png" alt=""></div>
                        <div class="mess">
                            <p class="name">腾讯音乐娱乐</p>
                            <p class="decs">创造音乐无限可能</p>
                        </div>
                    </div>
                    <div class="box">
                        <div class="log"><img src="./images/YWJT.png" alt=""></div>
                        <div class="mess">
                            <p class="name">阅文集团</p>
                            <p class="decs">阅世界，悦无界</p>
                        </div>
                    </div>
                    <div class="box">
                        <div class="log"><img src="./images/TXDJ.png" alt=""></div>
                        <div class="mess">
                            <p class="name">腾讯电竞</p>
                            <p class="decs">阅世界，悦无界</p>
                        </div>
                    </div>
                    <div class="box">
                        <div class="log"><img src="./images/TXKD.png" alt=""></div>
                        <div class="mess">
                            <p class="name">腾讯看点</p>
                            <p class="decs">看懂世界，点亮生活</p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 轮播图 -->
            <div class="swiper">
                <!-- Swiper -->
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" style="background-image:url(./images/JOJO1.jfif)"></div>
                        <div class="swiper-slide" style="background-image:url(./images/JOJO2.jfif)"></div>
                        <div class="swiper-slide" style="background-image:url(./images/JOJO3.jfif)"></div>
                        <div class="swiper-slide" style="background-image:url(./images/JOJO4.jfif)"></div>
                        <div class="swiper-slide" style="background-image:url(./images/JOJO5.jfif)"></div>
                        <div class="swiper-slide" style="background-image:url(./images/JOJO6.webp)"></div>
                        <div class="swiper-slide" style="background-image:url(./images/JOJO7.webp)"></div>
                        <div class="swiper-slide" style="background-image:url(./images/JOJO8.jfif)"></div>
                        <div class="swiper-slide" style="background-image:url(./images/JOJO9.webp)"></div>
                        <div class="swiper-slide" style="background-image:url(./images/JOJO10.jfif)"></div>
                    </div>
                    <!-- Add Pagination -->
                    <div class="swiper-pagination"></div>
                </div>
            </div>
            <!-- 主体内容部分  金融科技服务 -->
            <div class="business-sz clearfix" style="background-color: #fff;">
                <div class="sz-text">
                    <h3>金融科技服务</h3>
                    <p>秉承合规、精品、风控、开放、有所为有所不为的发展<br>理念，腾讯金融科技以微信支付和QQ钱包两大平台为基<br>础，致力于连接人与金融，构建金融生态，与合作伙伴<br>携手为全球用户提供移动支付、财富管理、信贷服务、<br>证券投资等创新金融服务。
                    </p>
                </div>
                <div class="sz-box box222">
                    <div class="box">
                        <div class="log"><img src="./images/WXZF.png" alt=""></div>
                        <div class="mess">
                            <p class="name">微信支付</p>
                            <p class="decs">微信支付 不止支付</p>
                        </div>
                    </div>
                    <div class="box">
                        <div class="log"><img src="./images/QQQB.png" alt=""></div>
                        <div class="mess">
                            <p class="name">QQ钱包</p>
                            <p class="decs">一站式生活服务</p>
                        </div>
                    </div>
                    <div class="box">
                        <div class="log"><img src="./images/LCT.png" alt=""></div>
                        <div class="mess">
                            <p class="name">理财通</p>
                            <p class="decs">微信理财，你就理财通</p>
                        </div>
                    </div>
                    <div class="box">
                        <div class="log"><img src="./images/XYKHD.png" alt=""></div>
                        <div class="mess">
                            <p class="name">行用卡还款</p>
                            <p class="decs"></p>
                        </div>
                    </div>
                    <div class="box">
                        <div class="log"><img src="./images/SJCZ.png" alt=""></div>
                        <div class="mess">
                            <p class="name">手机充值</p>
                            <p class="decs"></p>
                        </div>
                    </div>
                    <div class="box">
                        <div class="log"><img src="./images/CCM.png" alt=""></div>
                        <div class="mess">
                            <p class="name">乘车码</p>
                            <p class="decs"></p>
                        </div>
                    </div>
                    <div class="box">
                        <div class="log"><img src="./images/WXXGQB.png" alt=""></div>
                        <div class="mess">
                            <p class="name">微信香港钱包</p>
                            <p class="decs"></p>
                        </div>
                    </div>
                    <div class="box">
                        <div class="log"><img src="./images/WXMLXYQB.png" alt=""></div>
                        <div class="mess">
                            <p class="name">微信马来西亚钱包</p>
                            <p class="decs"></p>
                        </div>
                    </div>
                    <div class="box">
                        <div class="log"><img src="./images/TXQKL.png" alt=""></div>
                        <div class="mess">
                            <p class="name">腾讯区块链</p>
                            <p class="decs"></p>
                        </div>
                    </div>
                    <div class="box">
                        <div class="log"><img src="./images/TXZXGP.png" alt=""></div>
                        <div class="mess">
                            <p class="name">腾讯自选股票</p>
                            <p class="decs"></p>
                        </div>
                    </div>
                    <div class="box">
                        <div class="log"><img src="./images/TST.png" alt=""></div>
                        <div class="mess">
                            <p class="name">退税通</p>
                            <p class="decs"></p>
                        </div>
                    </div>
                    <div class="box">
                        <div class="log"><img src="./images/CFTSQF.png" alt=""></div>
                        <div class="mess">
                            <p class="name">财付通商企付</p>
                            <p class="decs"></p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 主题内容部分 工具 -->
            <div class="business-sz clearfix" style="height: 710px;">
                <div class="sz-text">
                    <h3>工具</h3>
                    <p>腾讯为用户提供多种工具性软件，帮助用户快速直接地<br>解决网络安全管理、快捷浏览、定位出行、应用管理、<br>电子邮件等具体需求。
                    </p>
                </div>
                <div class="sz-box box333">
                    <div class="box">
                        <div class="log"><img src="./images/TXSJGJ.png" alt=""></div>
                        <div class="mess">
                            <p class="name">腾讯手机管家</p>
                            <p class="decs">有实力 无所惧</p>
                        </div>
                    </div>
                    <div class="box">
                        <div class="log"><img src="./images/TXDNGJ.png" alt=""></div>
                        <div class="mess">
                            <p class="name">腾讯电脑管家</p>
                            <p class="decs"></p>
                        </div>
                    </div>
                    <div class="box">
                        <div class="log"><img src="./images/QQLLQ.png" alt=""></div>
                        <div class="mess">
                            <p class="name">QQ浏览器</p>
                            <p class="decs">我的兴趣世界</p>
                        </div>
                    </div>
                    <div class="box">
                        <div class="log"><img src="./images/TXDT.png" alt=""></div>
                        <div class="mess">
                            <p class="name">腾讯地图</p>
                            <p class="decs"></p>
                        </div>
                    </div>
                    <div class="box">
                        <div class="log"><img src="./images/YYB.png" alt=""></div>
                        <div class="mess">
                            <p class="name">应用宝</p>
                            <p class="decs">上应用宝，下一种生活</p>
                        </div>
                    </div>
                    <div class="box">
                        <div class="log"><img src="./images/QQYX.png" alt=""></div>
                        <div class="mess">
                            <p class="name">QQ邮箱</p>
                            <p class="decs"></p>
                        </div>
                    </div>
                    <div class="box">
                        <div class="log"><img src="./images/WXXCX.png" alt=""></div>
                        <div class="mess">
                            <p class="name">微信小程序</p>
                            <p class="decs"></p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- toC弹窗 -->
            <div class="to-c-pop">
                <div class="pop-bg"></div>
                <div class="pop-box">
                    <img class="close" src="./images/close.png" alt="img" />
                    <div class="logo-pic">
                        <img src="./images/wx.png" alt="img" />
                    </div>
                    <div class="mess-box">
                        <p class="name">理财通</p>
                        <div class="ms">
                            <p class="label">微信理财，你就理财通</p>
                            <a href="#" target="_blank">进入官网</a>
                        </div>
                        <div class="desc">
                            <p>腾讯理财通作为腾讯官方理财平台，自2014年1月14日在微信支付内上线以来，就定位“精品化互联网理财平台”，携手银行、基金、券商、保险等金融机构，针对用户不同风险等级的理财需求，为用户定制固定收益类、浮动收益类等不同资产类别的金融理财产品，通过多样化的理财产品满足不同用户的理财需求。除此之外，理财通先后上线了工资定投、梦想计划、指数定投、信用卡还款理财、还房贷理财等产品功能，为用户提供安全、稳健、便捷、多元的互联网理财服务。
                            </p>
                            <p>腾讯理财通严格遵循“精选”理念，首先从投资能力、产品设计、组织活力、创新能力等方面，多维度全面筛选合作机构，再从产品投向细节、产品风险评估等方面，深度对产品进行筛选，只有通过筛选的产品才能进入理财产品精品库。
                            </p>
                            <p>截至2018年第四季度，腾讯理财通有效用户数已达1亿，协助客户管理资产超过6000亿元人民币。</p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- toC弹窗 -->
        </div>
        <!-- 面向企业模块 -->
        <div class="business clearfix" style="display: none;">
            <div class="business_enterprise">
                <!-- 腾讯广告 -->
                <div class="tx_banner">
                    <div class="mod-con">
                        <!-- hd -->
                        <div class="banner_hd">
                            <div class="label-box clearfix">
                                <img src="./images/txad.png" alt="" />
                            </div>
                            <div class="desc-box">
                                <p class="desc">国内领先的大数据营销平台，汇聚腾讯公司全量的应用场景，基于海量商业数据、营销技术与专业服务能力，提供一体化数字化营销方案。 腾讯广告致力于高效的营销解决方案，构建品牌与用户的美好连接，为客户提供高效的营销解决方案。
                                </p>
                                <div class="go-icon">
                                    <img src="images/go-icon.png" alt="img">
                                </div>
                            </div>
                        </div>
                        <!-- bd -->
                        <div class="banner_bd">
                            <img src="./images/b-flx-1.jpg" alt="">
                        </div>
                    </div>
                </div>
                <!-- 腾讯云 -->
                <div class="txyun">
                    <div class="mod-con">
                        <!-- hd 样式与广告部分一样直接调用的腾讯广告类名-->
                        <div class="banner_hd">
                            <div class="label-box clearfix">
                                <img src="./images/txcloud.png" alt="" />
                            </div>
                            <div class="desc-box">
                                <p class="desc">
                                    腾讯倾力打造的云服务品牌，为客户提供领先的云产品与云服务。依托遍布全球的数据中心，腾讯云将云计算、大数据、人工智能、物联网、安全等先进技术与智慧产业业务场景相结合，同时面向金融、教育、医疗、零售、工业、交通、能源、广电等领域，打造全面的智慧行业解决方案。
                                </p>
                                <div class="go-icon">
                                    <img src="images/go-icon.png" alt="img">
                                </div>
                            </div>
                        </div>
                        <!-- bd 样式与广告部分一样直接调用的腾讯广告类名-->
                        <div class="banner_bd">
                            <img src="./images/b-flx-2.jpg" alt="">
                        </div>
                    </div>
                </div>
                <!-- 智慧产业 -->
                <div class="SmartIndustry">
                    <div class="mod-con">
                        <!-- hd 样式与广告部分一样直接调用的腾讯广告类名-->
                        <div class="banner_hd">
                            <div class="label-box clearfix">
                                <h3> 智慧产业</h3>
                            </div>
                            <div class="desc-box">
                                <p class="desc">
                                    腾讯作为“数字化助手”，利用云、AI、大数据分析、安全、支付、小程序、LBS等多种前沿互联网平台服务与技术，帮助各行各业进行数字化升级，打造智慧产业方案，不仅为他们节省成本、提高效率，还帮助客户找到新商业模式或者盈利增长点，构建连接用户与商业的智慧产业新生态。目前，腾讯已经在金融、零售、民生服务、旅游、医疗、出行和教育等产业展开布局。
                                </p>
                            </div>
                        </div>
                        <!-- bd tab栏 -->
                        <!-- tab图片 -->
                        <div class="pic-box">
                            <ul class="box">
                                <li class="active-li"><img src="./images/banner-1.jpg" alt="img"></li>
                                <li class=""><img src="./images/banner-2.jpg" alt="img"></li>
                                <li class=""><img src="./images/banner-3.jpg" alt="img"></li>
                                <li class=""><img src="./images/banner-4.jpg" alt="img"></li>
                            </ul>
                        </div>
                        <!-- tab触摸 -->
                        <div class="tab-box">
                            <ul class="box">
                                <li class="active-tab">
                                    <a href="https://www.tencent.com/zh-cn/business/smart-retail.html">
                                        <h4 class="label">智慧零售</h4>
                                        <p class="desc">腾讯智慧零售旨在为合作伙伴提供包括咨询、规划、试点运营及部署实施在内的一站式解决方案及服务。</p>
                                    </a>
                                </li>
                                <li class="">
                                    <a href="https://www.tencent.com/zh-cn/business/smart-healthcare.html">
                                        <h4 class="label">智慧医疗</h4>
                                        <p class="desc">腾讯智慧医疗，聚焦科技助力，推动医疗健康领域的技术创新、应用创新、合作模式创新。</p>
                                    </a>
                                </li>
                                <li class="">
                                    <a href="https://www.tencent.com/zh-cn/business/smart-transportation.html">
                                        <h4 class="label">智慧出行</h4>
                                        <p class="desc">在智慧出行方面，腾讯依托人工智能、高精地图、仿真平台、社交体系、移动支付及网络安全，将传统交通运输业和互联网进行融合。</p>
                                    </a>
                                </li>
                                <li class="">
                                    <a href="https://www.tencent.com/zh-cn/business/smart-education.html">
                                        <h4 class="label">智慧教育</h4>
                                        <p class="desc">腾讯智慧教育以连接、内容、社会责任为出发点，借助腾讯服务11亿用户的连接能力、科技力量、丰富的数字内容积累。</p>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <!-- 智慧产业工具 -->
                        <div class="product-box">
                            <h3 class="mid-label">智慧产业工具</h3>
                            <div class="item item-one">
                                <a href="#">
                                    <div class="pic">
                                        <img src="./images/qywx.png" alt="企业微信">
                                    </div>
                                    <p class="desc">
                                        企业微信，是腾讯微信团队为企业打造的通信与办公工具，具有与微信一致的沟通体验、丰富的OA应用及连接微信的能力，可帮助企业以连接为基础，实现智慧管理、智慧生态、智慧服务。
                                    </p>
                                </a>
                            </div>
                            <div class="item item-two">
                                <a href="#">
                                    <div class="pic">
                                        <img src="./images/txhy.png" alt="腾讯会议">
                                    </div>
                                    <p class="desc">
                                        腾讯会议是腾讯云旗下的一款音视频会议产品，为提升跨企业、跨区域沟通协作效率而设计，为全球用户提供高清流畅、便捷易用、安全可靠的云端会议体验。腾讯会议于2019年12月底上线，国际版（VooV Meeting）于2020年3月上线。
                                    </p>
                                </a>
                            </div>
                            <div class="item item-three">
                                <a href="#">
                                    <div class="pic">
                                        <img src="./images/xcx.png" alt="微信小程序">
                                    </div>
                                    <p class="desc">
                                        微信小程序为商家、企业和机构提供便捷的开发工具、运营平台以及运营支持，开发及利用小程序向微信用户提供更佳的服务，让优质的服务更多地触达用户。同时，平台也努力提高小程序商业变现的能力，通过支持广告变现等形式，为商家创造更多价值。
                                    </p>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 创新科技模块 -->
        <div class="business clearfix" style="display: none;">
            <!-- slider -->
            <div id="my-slider" class="crs-wrap">
                <div class="crs-screen">
                    <div class="crs-screen-roll">
                        <div class="crs-screen-item" style="background-image: url('./images/flx-3.1.jpg')">
                            <div class="crs-screen-item-content">
                                <h1>人工智能</h1>
                            </div>
                        </div>
                        <div class="crs-screen-item" style="background-image: url('./images/type-box-1.jpg')">
                            <div class="crs-screen-item-content">
                                <h1>前沿科技</h1>
                            </div>
                        </div>
                        <div class="crs-screen-item" style="background-image: url('./images/b-type-box-2.jpg')">
                            <div class="crs-screen-item-content">
                                <h1>多媒体实验室</h1>
                            </div>
                        </div>
                        <div class="crs-screen-item" style="background-image: url('./images/b-type-box-3.jpg')">
                            <div class="crs-screen-item-content">
                                <h1>机器人</h1>
                            </div>
                        </div>
                        <div class="crs-screen-item" style="background-image: url('./images/b-type-box-4.jpg')">
                            <div class="crs-screen-item-content">
                                <h1>物联网</h1>
                            </div>
                        </div>
                        <div class="crs-screen-item" style="background-image: url('./images/b-flx-4.jpg')">
                            <div class="crs-screen-item-content">
                                <h1>未来探索</h1>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="crs-bar">
                    <div class="crs-bar-roll-current"></div>
                    <div class="crs-bar-roll-wrap">
                        <div class="crs-bar-roll">
                            <div class="crs-bar-roll-item" style="background-image: url('./images/flx-3.1.jpg')"></div>
                            <div class="crs-bar-roll-item" style="background-image: url('./images/type-box-1.jpg')"></div>
                            <div class="crs-bar-roll-item" style="background-image: url('./images/b-type-box-2.jpg')"></div>
                            <div class="crs-bar-roll-item" style="background-image: url('./images/b-type-box-3.jpg')"></div>
                            <div class="crs-bar-roll-item" style="background-image: url('./images/b-type-box-4.jpg')"></div>
                            <div class="crs-bar-roll-item" style="background-image: url('./images/b-flx-4.jpg')"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="business-last clearfix">
                <!-- 人工智能 模块 -->
                <div class="hot clearfix">
                    <h3>人工智能</h3>
                    <p>腾讯应用各种不同的科技资产，包括强大的计算能力、丰富的数据资料及多元的使用场景，致力提升人工智能的理解、决策及创造能力，把人工智能的研<br>究硕果惠及人类和世界。</p>
                    <img src="./images/you.png" alt="" class="u">
                    <img src="./images/flx-3.1.jpg" alt="" class="flx">
                </div>
            </div>
            <div class="business-last clearfix">
                <!-- 前沿科技 模块 -->
                <div class="hot clearfix" style="background-color: #fbfbfb;">
                    <h3>前沿科技</h3>
                    <p>腾讯应用各种不同的科技资产，包括强大的计算能力、丰富的数据资料及多元的使用场景，致力提升人工智能的理解、决策及创造能力，把人工智能的研<br>究硕果惠及人类和世界。</p>
                    <div class="opit">
                        <img src="./images/b-type-box-1.jpg" alt="">
                        <img src="./images/b-type-box-2.jpg" alt="">
                        <img src="./images/b-type-box-3.jpg" alt="">
                        <img src="./images/b-type-box-4.jpg" alt="">
                    </div>
                </div>
            </div>
            <div class="business-last clearfix" style="margin-top: px;">
                <!-- 未来探索模块 模块 -->
                <div class="hot clearfix">
                    <h3>未来探索</h3>
                    <p>腾讯致力营造更有活力的自然生态环境。我们与合作伙伴一起探索未来，努力发展新技术，务求克服有关粮食、能源及水资源管理等全球关键问题。目<br>前，我们与瓦格宁根大学合作，研究以人工智能及智慧温室改善农产的方法，缓解粮食短缺的问题。
                    </p>
                    <img src="./images/you.png" alt="" class="u">
                    <img src="./images/b-flx-4.jpg" alt="" class="flx">
                </div>
            </div>
        </div>
    </div>
    </div>
    <!-- 公共样式----尾部信息栏制作开始 -->
    <div class="common-foot">
        <div class="w common-text">
            <!-- 关注我们栏目制作 -->
            <div class="focus-us">
                <h1>关注我们</h1>
                <ul>
                    <li>
                        <a href="javascript:;" class="wechat-code-btn">
                            <b class="icon wechat"></b>
                            <img class="wechat-code" src="images/wechat-code.jpg" alt="">
                        </a>
                    </li>
                    <li><a href="javascript:;"><b class="icon weibo"></b></a></li>
                    <li><a href="javascript:;"><b class="icon twitter"></b></a></li>
                    <li><a href="javascript:;"><b class="icon mi"></b></a></li>
                </ul>
            </div>
            <!-- 加入我们制作 -->
            <div class="footer-center join-us">
                <div class="title">
                    <h3>加入我们</h3>
                </div>
                <ul>
                    <li><a href="javascript:;">社会招聘</a></li>
                    <li><a href="javascript:;">校园招聘</a></li>
                    <li><a href="javascript:;">国际招聘</a></li>
                </ul>
            </div>
            <!-- 联系我们制作 -->
            <div class="footer-center contact-us">
                <div class="title">
                    <h3>联系我们</h3>
                </div>
                <ul>
                    <li><a href="javascript:;">客户服务</a></li>
                    <li><a href="javascript:;">合作洽谈</a></li>
                    <li><a href="javascript:;">腾讯采购</a></li>
                    <li><a href="javascript:;">媒体及投资者</a></li>
                </ul>
            </div>
            <!-- 法律信息制作 -->
            <div class="footer-center law-meaasge">
                <div class="title">
                    <h3>法律信息</h3>
                </div>
                <ul>
                    <li><a href="javascript:;">服务协议</a></li>
                    <li><a href="javascript:;">隐私政策</a></li>
                    <li><a href="javascript:;">知识产权</a></li>
                </ul>
            </div>
            <!-- 尾部logo制作 -->
            <div class="footer-logo">
                <img src="images/tencent_logo.png" alt="Tencent腾讯">
            </div>
            <!-- 尾部企业信息制作 -->
            <div class="footer-company">
                <ul class="links">
                    <li>
                        <a href="javascript:;">法律声明</a>
                    </li>
                    <li>
                        <a href="javascript:;">阳光准则</a>
                    </li>
                    <li>
                        <a href="javascript:;">网站地图</a>
                    </li>
                    <li class="num">
                        <a href="javascript:;">粤网文【2017】6138-1456号</a>
                    </li>
                    <li class="num">
                        <a href="javascript:;">粤B2-20090059-1</a>
                    </li>

                </ul>
                <p class="copyright">Copyright © 1998 - 2021 Tencent. All Rights Reserved. 腾讯公司 版权所有</p>

            </div>
        </div>
    </div>
    <!-- 公共样式----尾部信息栏制作结束 -->
    <!-- 判断页面是否为上下滚动 -->
    <!-- 需求一: 当页面滚动在72到100之间的时候, common-first里面样式发生改变-->
    <!-- 需求: 当页面滚动>72且往下滚动的时候,common-first往上移动72px-->
    <!-- 需求: 当页面滚动>72且往上滚动的时候,common-first在往下移动72px,并修改样式-->
    <script>
        $(function() {
            function a() {
                $(".common-first").css("backgroundColor", "white");
                $(".common-menu").find("a").css("color", "black");
                $(".common-chosefont").find("a,i").css("color", "black");
                $(".common-nav-logo").find("h1").addClass("h1hover");
            }

            function moveWind() {
                var startScrollTop = document.body.scrollTop;
                window.addEventListener('scroll', function() {
                    var moveScrollTop = window.pageYOffset;
                    var moveLength = moveScrollTop - startScrollTop;
                    console.log(moveLength);
                    startScrollTop = moveScrollTop;
                    if (window.pageYOffset > 72) {
                        a();
                        console.log(12);
                        if (window.pageYOffset > 100) {
                            $(".common-first").css("marginTop", -72)
                            console.log(111);
                        }
                    }
                    if (moveLength === 0) {
                        console.log(false);
                    } else if (moveLength > 0) {
                        $(".common-first").css("marginTop", -72)
                    } else if (moveLength < 0) {
                        // console.log("up");
                        $(".common-first").css("marginTop", 0)
                        a();
                    };
                });
            }
            moveWind();
            /* if(window.pageYOffset === 0){
                        $(".common-first").css("backgroundColor","");
                        $(".common-menu").find("a").css("color","white");
                        $(".common-chosefont").find("a,i").css("color","white");
                        $(".common-nav-logo").find("h1").removeClass("h1hover");
            }; */
        })
    </script>
    <!-- 引入动画 jquery-2.1.1.min.js 样式 -->
    <script src="./js/jquery-1.11.0.min.js"></script>
    <!-- 引入动画 camroll_slider.js 样式 -->
    <script src="./js/camroll_slider.js"></script>
    <!-- 动画 -->
    <script>
        $("#my-slider").camRollSlider();
    </script>
</body>

</html>